<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<view class="title-content" slot="content" @click="$refs.drawer.open">
				{{parm.name || '全部通知'}}
				<text class="iconfont icon-icon-arrow-right2-copy"></text>
			</view>
			<navigator url="./add" slot="right" style="font-size: 15px;margin-right: 10px;">
				<text class="iconfont icon-jia" style="font-size:1em;margin-right: .2em;"></text>
				新增
			</navigator>
		</cu-custom>
		<a-fixed :height="45">
			<a-search style="border: 1px solid #c1c1c1;margin: 10px 15px;" placeholder="搜索主题 发送人" @change="search" />
		</a-fixed>
		<a-scroll :request="get" ref="aScroll" :parm="{pageSize:7}">
			<template #item="{row,index}">
				<uni-card-notice :thumbnail="msgImg" :is-shadow="true" mode="title" :title="row.title" :extra="row.extra" isShadow
				 :note="row.date" @click="clickCard(row)">
					<text class="content-box-text">{{row.subTitle}}</text>
				</uni-card-notice>
			</template>
		</a-scroll>
		<uni-drawer ref="drawer" mode="right" :width="300" @close="close">
			<y-form :keys="columns" v-model="info" @submit="submit" submitText="确定">
				<template #startTime="{keys:{key}}">
					<datetime-picker style="flex:1;" defaultValue="" placeholder="请选择" fields="minute" @change="dateChange($event,key)" />
				</template>
				<template #endTime="{keys:{key}}">
					<datetime-picker style="flex:1;" defaultValue="" placeholder="请选择" fields="minute" @change="dateChange($event,key)" />
				</template>
			</y-form>
		</uni-drawer>
	</view>
</template>

<script>
	import yForm from "@/y-ui/y-form/y-form.vue";
	import {
		format
	} from '@/a/utils/api.js'
	export default {
		components: {
			yForm
		},
		//上拉触底
		onReachBottom() {
			this.$refs.aScroll.lower();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.$refs.aScroll.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		data() {
			return {
				msgImg: require('./msg.png'),
				tabs: [{
						msgTypeCode: '',
						name: "全部通知"
					}, {
						msgTypeCode: 'CLASS_NOTICE_APP',
						name: "班级通知"
					}, {
						msgTypeCode: 'SCHOOL_NOTICE_APP',
						name: "学校通知"
					},
					{
						msgTypeCode: 'MEETING__NOTICE_APP',
						name: "会议通知"
					}, {
						msgTypeCode: 'STU_OUT_INTO_HINT',
						name: "进出校提醒"
					}
				],
				parm: {
					msgTypeCode: '',
					name: ''
				},
				//默认项
				info: {
					msgTypeCode: '',
					name: '',
					startTime: '',
					endTime: ''
				}
			}
		},
		computed: {
			columns() {
				return [{
					type: 'yPicker',
					key: 'msgTypeCode',
					lable: '栏目：',
					placeholder: '请选择栏目',
					range: this.tabs,
					rangeKey: 'name',
					valueKey: 'msgTypeCode',
					change(e, {
						key,
						range,
						rangeKey
					} = {}, v) {
						if (!v) return;
						range.map(x => {
							if (x[key] === e) {
								v[rangeKey] = x[rangeKey];
							}
						});
					},
				}, {
					key: 'startTime',
					lable: '开始时间：',
					slot: "startTime",
				}, {
					key: 'endTime',
					lable: '结束时间：',
					slot: "endTime"
				}];
			}
		},
		methods: {
			async get(parm) {
				return this.$http.get('/api/v1/bMessage/selectBMessagesByMsgTypeCode', {
					...parm,
					...this.parm
				}).then((result) => {
					return {
						total: result.totalSize,
						data: result.results.map(x => {
							return {
								...x,
								extra: '发布人:' + x.senderName,
								date: format(x.sendTime)
							}
						})
					}
				});
			},
			clickCard(e) {
				uni.navigateTo({
					url: `./notice_details?id=${e.msgId}&senderName=${e.senderName}`
				});
			},
			bindTimeChange({
				detail: {
					value
				}
			}) {
				Object.assign(this.info, this.tabs[value]);
			},
			dateChange({
				f3
			}, key) {
				this.$set(this.info, key, format(f3));
			},
			submit() {
				Object.assign(this.parm, this.info);
				this.$refs.drawer.close();
				this.$refs.aScroll.get(true);
				this.info = {};
			},
			search(v) {
				this.$set(this.parm, 'searchName', v);
				this.$refs.aScroll.get(true);
			}
		}
	}
</script>

<style lang="scss">
	.content-box-text {
		font-size: 15px;
		font-weight: 500;
		line-height: 22px;
	}

	.title-content {
		display: flex;
		align-items: center;
		justify-content: center;

		.icon-icon-arrow-right2-copy {
			transform: rotateZ(90deg);
			display: inline-block;
			font-size: 24px;
		}
	}
</style>
